<template>
  <div>
    <div class="logisticsDiv" v-if="logisticsInfo.length > 0">
      <div class="logisticsHeader">
        <div class="logisticsLogo">
          <div><img src="/static/images/user/logisticslogo.png"></div>
        </div>
        <div class="logisticsIntro">
          <h3>申通快递</h3>
          <p>官方电话 &nbsp;95543</p>
          <p>快递单号：{{courierNumber}}</p>
        </div>
      </div>
      <div class="kong"></div>
      <ul class="textUl"> 
        <logistics-item v-for="(item,index) in logisticsInfo" 
        :key="index"
        :infos = "item">
        </logistics-item>
      </ul>
    </div>
    <div class="lackLogistics" v-else>
      <div class="lackLogisticsTxt">
        <div><img src="/static/images/lack/lackWuliu.png"></div>
        <p>暂无物流信息~</p>
      </div>
    </div>
  </div>
</template>

<script>
import logisticsItem from './logistics-item.vue'
  export default {
    components:{
      logisticsItem
    },
    data(){
      return{
        isShowFirst: false, //第一行的样式
        courierNumber: "",//快递单号
        orderNo: "",//订单号
        logisticsInfo: [], //物流信息
      }
    },
    onLoad(option){
      this.orderNo = option.orderNo
      this.getInfo()
    },
    methods: {
      getInfo(){
        this.$http.get(`order/checkLogistics?no=${this.orderNo}`,'','',false).then((data)=>{ 
          if(data.data.code === 7){
            this.logisticsInfo = []
          }else{
            this.logisticsInfo = data.data.data.expressResponses
            this.courierNumber = data.data.data.expressNo
          }
        })
      },
    }
  }
</script>

<style scoped>
.kong{
  background: #efeff4;
  width: 100%;
  height: 20rpx; 
}
.logisticsHeader{
  padding: 30rpx 24rpx;
  display: flex;
  background: #fff;
}
.logisticsHeader .logisticsLogo{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 38rpx;
}
.logisticsHeader .logisticsLogo>div{
  width: 169rpx;
  height: 169rpx;
}
.logisticsHeader .logisticsLogo>div img{
  width: 100%;
  height: 100%;
  display: inline-block;
}
.logisticsHeader .logisticsIntro{
  overflow: hidden;
}
.logisticsHeader .logisticsIntro h3{
  font-size: 32rpx;
  color: #2a2a2a;
  margin-top: 15rpx;
}
.logisticsHeader .logisticsIntro p{
  font-size: 28rpx;
  color: #2a2a2a;
  line-height: 60rpx;
}
.textUl{
  position: relative;
  padding: 20rpx 0 20rpx 40rpx;
  overflow: hidden;
  width: auto;
  height: 100%;
  margin-right: 24rpx;
}
.textUl li{
  font-size: 28rpx;
  line-height: 40rpx;
  height: auto;
  display: flex;
}
.textUl li .textIcon{
  width: 2rpx;
  height: auto;
  background: #ddd;
}
.textUl li .textIcon i{
  display: block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #ddd;
  position: relative;
  left: -10rpx;
  top: 30rpx;
}
.textUl li .textIcon span{
  display: block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #4ecc80;
  display: none;
}
.textUl li .textInfo{
  color: #969696;
  padding: 20rpx 0;
  margin-left: 40rpx;
  width: 100%;
}
.textUl li .textInfo .logisticsTime{
  font-size: 24rpx;
  line-height: 48rpx;
}
.textUl li:first-child .textInfo{
  color: #1cb665;
}
.textUl li:first-child .textIcon i{
  top: 0;
  width: 20px;
  height: 20px;
  background: #c6efd6;
  left: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.textUl li:first-child .textIcon span{
  display: block;
}
.lackLogistics{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackLogistics .lackLogisticsTxt{
  margin-top: 50%;
}
.lackLogistics .lackLogisticsTxt div{
  width: 140rpx;
  height: 148rpx;
  margin: 0 auto;
}
.lackLogistics .lackLogisticsTxt div img{
  width: 100%;
  height: 100%;  
}
.lackLogistics .lackLogisticsTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}

</style>
